<ui:composition template="/pages/templates/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="title">Enregistrement des articles</ui:define>
	<ui:define name="content">
		<h:form id="form">
			<p:messages id="messages" showDetail="true" autoUpdate="true"
				closable="true" />

			<p:panel id="toggleable" header="ENREGISTREMENT DES ARTICLES"
				toggleable="true" toggleSpeed="500" widgetVar="panel">
				<p:fieldset id="saisie" legend="Saisie des informations"
					toggleable="true" toggleSpeed="500">
					<p:wizard flowListener="#{wizardBean.onFlowProcess}">
						<p:tab id="article" title="ARTICLE">
							<p:panel header="Article Detail">
								<h:panelGrid columns="3" cellpadding="10">
									<p:outputLabel for="journaliste" value="Journaliste" />
									<p:selectOneMenu id="journaliste" required="true"
										value="#{wizardBean.selectedJournalisteCombo}"
										converter="#{entityConverter}">
										<f:selectItem itemLabel="Selectionnez" itemValue="" />
										<f:selectItems var="journalist"
											value="#{wizardBean.journalistes}"
											itemLabel="#{journalist.journalisteNom}"
											itemValue="#{journalist}" />
										<p:ajax update="journalisteMsg" event="keyup" />
									</p:selectOneMenu>
									<p:message id="journalisteMsg" for="journaliste" display="icon" />

									<h:outputLabel for="contenu" value="Contenu" />
									<p:inputTextarea id="contenu"
										value="#{wizardBean.currentArticle.articleContenu}"
										required="true" rows="8" cols="50" />
									<p:message id="contenuMsg" for="contenu" display="icon" />
								</h:panelGrid>
							</p:panel>
						</p:tab>

						<p:tab id="sujetNumero" title="SUJET">
							<p:panel header="Sujet Detail">
								<h:panelGrid columns="3" cellpadding="10">
									<h:outputLabel for="sujet" value="Sujet" />
									<p:inputText id="sujet" styleClass="field-capitalize"
										value="#{wizardBean.currentSujet.sujetLibelle}"
										required="true" />
									<p:message id="sujetMsg" for="sujet" display="icon" />

									<p:outputLabel for="numeroDate" value="Date de parution" />
									<p:calendar id="numeroDate"
										value="#{wizardBean.currentNumero.numeroDate}" locale="fr"
										navigator="true" showButtonPanel="true" required="true"
										pattern="dd/MM/yyyy">
										<p:ajax update="numeroDateMsg" event="keyup" />
									</p:calendar>
									<p:message id="numeroDateMsg" for="numeroDate" display="icon" />
								</h:panelGrid>
							</p:panel>
						</p:tab>

						<p:tab id="confirm" title="CONFIRMATION">
							<p:panel header="Confirmation">
								<h:panelGrid id="confirmation" columns="2">
									<h:panelGrid columns="2" cellpadding="5">
										<h:outputText value="Journaliste :" styleClass="field-bold" />
										<h:outputText
											value="#{wizardBean.selectedJournalisteCombo.journalisteNom}" />

										<p:outputLabel value="Contenu :" styleClass="field-bold" />
										<h:outputText
											value="#{wizardBean.currentArticle.articleContenu}" />
									</h:panelGrid>

									<h:panelGrid columns="2" cellpadding="5">
										<h:outputText value="Sujet :" styleClass="field-bold" />
										<h:outputText value="#{wizardBean.currentSujet.sujetLibelle}"
											styleClass="field-capitalize" />

										<h:outputText value="Date de parution :"
											styleClass="field-bold" />
										<h:outputText value="#{wizardBean.currentNumero.numeroDate}">
											<f:convertDateTime pattern="dd-MM-yyyy" />
										</h:outputText>
									</h:panelGrid>
								</h:panelGrid>
							</p:panel>
							<p:commandButton value="Enrégistrer"
								action="#{wizardBean.saveWizardObject}" icon="ui-icon-disk"
								update="@all" styleClass="save">
								<p:confirm header="Confirmation"
									message="Voulez-vous enrégistrer ?" icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="puff"
								hideEffect="explode">
								<p:commandButton value="Oui" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="Non" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>
						</p:tab>
					</p:wizard>
				</p:fieldset>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>
